<template>
  <!-- 个人信息 -->
  <div class="containerPage">
    <!-- 内容 -->
    <div class="tabList">
      <div class="tabItem">
        <u-upload style="width: 100%" :fileList="fileList" :max-count="1" @afterRead="afterRead">
          <div class="tabItem tabItem2" style="padding: 0">
            <div class="le">
              <span class="leSpan">头像</span>
            </div>
            <div class="le" style="">
              <img class="leImg" :src="userInfoCopy.avatar" alt="" />
              <img class="outLeft" src="@/static/image/webApp/homeRight.png" alt="" />
            </div>
          </div>
        </u-upload>
      </div>
      <div class="tabItem" @click="editUserNameShow = !editUserNameShow">
        <div class="le">
          <span class="leSpan">用户名</span>
        </div>
        <div class="le">
          <span class="leSpan">{{ userInfoCopy.username }}</span>
          <img class="outLeft" src="@/static/image/webApp/homeRight.png" alt="" />
        </div>
      </div>
    </div>
    <div class="tabList">
      <div class="tabItem">
        <div class="le">
          <span class="leSpan">账号/手机号</span>
        </div>
        <div class="le">
          <span class="leSpan marginRi">{{ userInfoCopy.phone }}</span>
        </div>
      </div>
    </div>

    <!-- 修改名称见弹出层 -->
    <u-popup :customStyle="{ borderRadius: '8px', overflow: 'hidden' }" mode="center" :show="editUserNameShow" @close="scanQrOrPcCommandTipFlag = false">
      <div class="examineBox">
        <div class="tit">更改名字</div>
        <u--input v-model="userInfo.username" type="text" :maxlength="20" placeholder="填写您的用户名" />
        <div class="rejectBtns">
          <div class="btn cancel" @click="editUserNameShow = !editUserNameShow">取消</div>
          <div class="btn submit" @click="updateInfoByLoginUser">确定</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editUserNameShow: false,
      fileList: [],
      userInfoCopy: {},
      userInfo: {},
    }
  },
  onShow() {
    this.userInfoCopy = JSON.parse(uni.getStorageSync('dtUsersVo') || '{}')
    this.userInfo = JSON.parse(uni.getStorageSync('dtUsersVo') || '{}')
  },
  methods: {
    async afterRead(e) {
      this.fileList = []
      uni.showLoading({
        title: '图片上传中',
      })
      const result = await this.uploadFilePromise(e.file.url)
      this.userInfo.avatar = result.result
      this.$u.toast('修改成功')
      uni.hideLoading()
      this.updateInfoByLoginUser()
    },

    //修改个人信息里的头像以及用户名
    updateInfoByLoginUser() {
      if (!this.userInfo.username || this.userInfo.username === ' ') {
        this.$u.toast('用户名不能为空')
        return
      }
      this.$https
        .post({
          url: '/axh/dtUsers/updateInfoByLoginUser',
          data: {
            avatar: this.userInfo.avatar,
            username: this.userInfo.username,
          },
        })
        .then((res) => {
          this.userInfoCopy = this.userInfo
          this.editUserNameShow = false
          this.$u.toast('修改成功')
          uni.setStorageSync('dtUsersVo', JSON.stringify(this.userInfo))
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.containerPage {
  background-color: #f9f9f9;
  min-height: 100vh;

  .tabList {
    background-color: #fff;
    width: 100%;
    margin-bottom: 24rpx;
    .tabItem {
      display: flex;
      box-sizing: border-box;
      width: 100%;
      height: 104rpx;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx;
      border-bottom: 1px solid #e5e5e5;
      &:nth-last-child(1) {
        border: none;
      }
      .le {
        display: flex;
        align-items: center;
        .leImg {
          width: 72rpx;
          height: 72rpx;
          background-color: #e5e5e5;
          border-radius: 50%;
        }
        .leSpan {
          font-size: 28rpx;
        }
        .outLeft {
          width: 38rpx;
          height: 38rpx;
          margin-left: 12rpx;
        }
        .marginRi {
          margin-right: 48rpx;
        }
      }
    }
    .tabItem2 {
      width: calc(100vw - 48rpx);
    }
  }

  .examineBox {
    text-align: center;
    padding: 32rpx;

    .tit {
      font-size: 30rpx;
      margin-bottom: 16rpx;
    }

    .rejectBtns {
      display: flex;
      .btn {
        display: flex;
        flex: 1;
        height: 72rpx;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        box-sizing: border-box;
        border-radius: 4px;
        margin-top: 24rpx;
      }

      .cancel {
        border: 1px solid #999;
        margin-right: 48rpx;
      }

      .submit {
        color: #fff;
        background: #2c83e4;
      }
    }
  }
}
</style>
